<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{background: black;}
		#draw{background: white;}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oDraw=document.getElementById('draw');
			var oC=oDraw.getContext('2d');
			var setArr=[];
			setInterval(function(){
				oC.clearRect(0,0,oC.width,oC.height);
				for(var i=0;i<setArr.length;i++){
			setArr[i].r += 1;
			setArr[i].c4 -= 0.01;
			if( setArr[i].c4 <= 0 ){
				setArr.splice(i,1);
			}
		}
				for(var i=0;i<setArr.length;i++){
			oC.beginPath();
			oC.fillStyle = 'rgba('+setArr[i].c1+','+setArr[i].c2+','+setArr[i].c3+','+setArr[i].c4+')';
			oC.moveTo(setArr[i].x , setArr[i].y);
			oC.arc( setArr[i].x , setArr[i].y , setArr[i].r , 0 , 360*Math.PI/180,false );
			oC.closePath();
			oC.fill();
		}
			},1000/60);
			setInterval(function(){
				var x = Math.floor(Math.random()*oDraw.width);
		var y = Math.floor(Math.random()*oDraw.height);
		var r = 10;
		var c1 = Math.floor(Math.random()*255);
		var c2 = Math.floor(Math.random()*255);
		var c3 = Math.floor(Math.random()*255);
		var c4 = 1;
		
		setArr.push({
			x : x,
			y : y,
			r : r,
			c1 : c1,
			c2 : c2,
			c3 : c3,
			c4 : c4
		});
			},500);
		}
	</script>
</head>
<body>
	<canvas id="draw" width="500" height="500"></canvas>
</body>
</html>